<template>
  <div>
    <div class="wrap">
      <div class="toutou">
        <router-link to="/person"><img @click="" class="img1" src="../../assets/个人中心/1个人中心/jiantou.png"/></router-link>
        <p>我的心得</p>
        <img  class="img2" src="../../assets/个人中心/1个人中心/fenxiang.png"/>
      </div>
      <div class="nichen">
        <div class="yuan">
          <img src="../../assets/个人中心/1个人中心/ren.png"/>
        </div>
        <p class="p">昵称</p>
        <span class="span1">{{cont}}</span>
        <div class="load">

        </div>
        <nav>8小时前</nav>
        <ul class="ul">
          <li class="li1">
            <img src="../../assets/个人中心/1个人中心/kouhong.png"/>
          </li>
          <li class="li2">
            <ol class="ol1">
              <span class="span2">焕彩萃璨花蕊唇彩4.8g</span>
            </ol>
            <ol class="ol2">
              <img class="img3" src="../../assets/个人中心/1个人中心/riben.png"/>
              <img class="img4" src="../../assets/个人中心/1个人中心/feiji.png"/>
              <span>海外直邮</span>
            </ol>
            <ol class="ol3">
              <span>￥166.06</span>
            </ol>
          </li>
        </ul>
      </div>
      <div class="pinglun">
        <p>用户评论（10）</p>
      </div>
      <ul class="yonghu" v-for="item in boy">
        <div class="touxiang"><img :src="encodeURI(item.ss)"/></div>
        <p>{{item.nichen}}</p>
        <span>{{item.pinglun}}</span>
        <li class="zan">
          <div>
            <img :src="encodeURI(item.dz)"/>
            <p>{{item.dianzan}}</p>
          </div>
          <div>
            <img :src="encodeURI(item.pl)"/>
            <p>{{item.xie}}</p>
          </div>
          <div>
            <img :src="encodeURI(item.fx)"/>
            <p>{{item.fenxiang}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        cont:"该模块主要内容是顾客对购买的商品的评价...",
        boy:[
          {nichen:"昵称",ss:require("../../assets/个人中心/1个人中心/ren.png"),pinglun:"评论1212211212211",dz:require("../../assets/个人中心/1个人中心/dianzan.png"),dianzan:"点赞",pl:require("../../assets/个人中心/1个人中心/pinglun.png"),xie:"写评论",fx:require("../../assets/个人中心/1个人中心/fenxiang1.png"),fenxiang:"分享"},
          {nichen:"昵称",ss:require("../../assets/个人中心/1个人中心/ren.png"),pinglun:"评论12122112122111",dz:require("../../assets/个人中心/1个人中心/dianzan.png"),dianzan:"点赞",pl:require("../../assets/个人中心/1个人中心/pinglun.png"),xie:"写评论",fx:require("../../assets/个人中心/1个人中心/fenxiang1.png"),fenxiang:"分享"},
        ]
      }
    }

  }
</script>

<style scoped>

  .wrap{
    width: 100%;
  }
  .toutou{
    width: 100%;
    height: 2.666rem;
    background: #e53e42;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
  }
  .toutou .img1{
    position: absolute;
    top: 1rem;
    width: 0.638rem;
    height: 1.055rem;
    left: 0.555rem;
  }
  .toutou .img2{
    line-height: 2.666rem;
    position: absolute;
    top: 1rem;
    right: 0.555rem;
    width: 1rem;
    height: 0.944rem;
  }
  .toutou p{
    height: 0.972rem;
    font-size: 1rem;
    line-height: 1.3rem;
    letter-spacing: 0;
    color: #ffffff;
  }
  .nichen{
    width: 100%;
    height: 18.777rem;
    background: white;
    position: relative;
  }
  .nichen .yuan{
    position: absolute;
    left: 0.555rem;
    top: 0.555rem;
    width: 2.222rem;
    height: 2.222rem;
    border: 1px solid #CCCCCC;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .yuan img{
    width: 1.222rem;
    height: 1.388rem;
  }
  .nichen .p{
    position: absolute;
    top: 1.333rem;
    left: 3.277rem;
    font-size: 0.777rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #4d4d4d;
  }
  .nichen .span1{
    position: absolute;
    top: 3.333rem;
    left: 0.555rem;
    font-size: 0.666rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #808080;
  }
  .load{
    position: absolute;
    top: 5.5rem;
    left: 0.555rem;
    width: 7.222rem;
    height: 5.555rem;
    border: 1px solid #CCCCCC;
    box-sizing: border-box;
  }
  .nichen nav{
    position: absolute;
    left: 0.555rem;
    bottom: 6.305rem;
    font-size: 0.666rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #808080;
  }
  .nichen .ul{
    position: absolute;
    left: 20px;
    bottom: 0.555rem;
    width: 90%;
    height: 4.444rem;
  }
  .nichen .ul .li1{
    width: 4.4rem;
    height: 4.444rem;
    box-sizing: border-box;
    border: 1px solid #CCCCCC;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .ul .li1 img{
    width: 1.916rem;
    height: 4.25rem;
  }
  .nichen .ul .li2{
    float: right;
    width: 10rem;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #CCCCCC;
    border-left: none;
  }
  .li2 ol{
    height: 33.333%;
    padding-left: 2.083rem;
    display: flex;
    align-items: center;
  }
  .nichen .li2 .ol1 .span2{
    font-size: 0.777rem;
    line-height: 100%;
    letter-spacing: 0;
    color: #4d4d4d;
  }
  .li2 .ol2 .img3{
    width: 0.833rem;
    height: 0.555rem;
    padding-right: 0.555rem;
    line-height: 100%;
  }
  .li2 .ol2 .img4{
    width: 0.944rem;
    height: 0.916rem;
    line-height: 100%;
    padding-right: 0.222rem;
  }
  .li2 .ol2 span{
    font-size: 0.666rem;
    line-height: 100%;
    letter-spacing: 0;
    color: #666666;
  }
  .li2 .ol3 span{
    font-size: 0.666rem;
    line-height:100%;
    letter-spacing: 0;
    color: #808080;
  }
  .pinglun{
    width: 100%;
    height: 2.222rem;
    margin-top: 0.555rem;
    background: white;
  }
  .pinglun p{
    padding-left: 0.555rem;
    font-size: 0.777rem;
    line-height: 2.222rem;
    letter-spacing: 0;
    color: #333333;
  }
  .yonghu{
    width: 100%;
    background: #F2F2F2;
    position: relative;
  }
  .yonghu .touxiang{
    width: 2.222rem;
    height: 2.222rem;
    border: 0.027rem solid #CCCCCC;
    border-radius: 50%;
    margin-top: 0.555rem;
    margin-left:0.555rem;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .yonghu .touxiang img{
    width: 1.222rem;
    height: 1.388rem;
  }
  .yonghu>p{
    position: absolute;
    top: 1.333rem;
    left: 3.277rem;
    font-size: 0.777rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #4d4d4d;
  }
  .yonghu>span{
    margin-top: 3.333rem;
    margin-left: 0.555rem;
    font-size: 0.666rem;
    line-height: 2rem;
    letter-spacing: 0;
    color: #808080;
  }
  .yonghu .zan{
    display: flex;
    width: 100%;
    height: 2.222rem;
    background: white;
  }
  .zan div{
    flex: 1;
    border-right: 1px solid #CCCCCC;
    display: flex;
    justify-content: center;
    position: relative;
  }
  .zan div img{
    position: absolute;
    top: 0.277rem;
    width: 0.666rem;
    height: 0.666rem;
  }
  .zan div p{
    position: absolute;
    bottom: 0.277rem;
    font-size: 0.666rem;
    line-height: 1rem;
    letter-spacing: 0;
    color: #808080;
  }
</style>
